<template>
	<w-collapse v-model="collapseVisible" contentHeight="400px" :fullScreen="fullScreen" disabled :showArrow="false" title="其他单位">
		<fx-detials-table
			ref="detailsTable"
			:disabled="disabled"
			:tableColumn="tableColumn"
			:tableValiDate="tableValiDate"
			:tableData="tableDetails"
			:tableEditColumnProp="tableEditColumnProp"
			:mainId="materialDetails.id"
      :fpSaveMain="fSaveMain"
			:fpBeforeRowEdit="beforeRowEdit"
			:fpDeleteDetails="fpDeleteDetails"
			:fpInitAddDetailsData="fpInitAddDetailsData"
			:fpSaveDetails="fpSaveDetails"
			:searchProps="['busUnit']"
			@on-details-refresh="onDetailsRefresh"
		>
		</fx-detials-table>
	</w-collapse>
</template>
<script>
const EDIT_INPUT_TYPE = ['busUnit', 'conversionFactor']
export default {
	name: 'detailsInfo',
	props: {
		fullScreen: Boolean,
		materialDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		tableDetails: {
			type: Array,
			default: () => {
				return []
			}
		},
		fSaveMain: Function,
		disabled: Boolean
	},
	data () {
		return {
			collapseVisible: true,
			tableColumn: [
				{
					prop: 'busUnit',
					label: '单位名称',
					width: '120px',
					required: true,
					fxRender: this.unitNameRender,
					click: this.onCellClick('code')
				},
				{ prop: 'unitType', label: '单位类型', width: '60px', formatter: row => '核算单位' },
				{
					prop: 'conversionFactor',
					label: '换算系数',
					width: '80px',
					required: true,
					fxRender: this.ratioRender,
					click: this.onCellClick('unit')
				},
				{ prop: 'describ', label: '换算说明', formatter: this.FormatterDescrib }
			],
			tableEditColumnProp: EDIT_INPUT_TYPE,
			tableValiDate: [{
				columnProp: 'busUnit',
				rule: this.checkBusUnit
			}, {
				columnProp: 'conversionFactor',
				rule (row, success, error) {
					if (!row.conversionFactor) {
						error('换算系数不能为空')
					} else {
						success()
					}
				}
			}]
		}
	},
	methods: {
		checkBusUnit (row, success, error) {
			const filterSign = this.tableDetails.find(d => d.busUnit === row.busUnit && d.$fxIndex !== row.$fxIndex)
			if (!row.busUnit) {
				error('单位名称不能为空')
			} else if (row.busUnit === this.materialDetails.materialUnitName || filterSign) {
				error('单位名称不能重复')
			} else {
				success()
			}
		},
		ratioRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-input-number
				ref={`conversionFactor-${$index}`}
				vModel={row.conversionFactor}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='conversionFactor'
				placeholder='请输入换算系数'
				cellText={this.ratioText(row)}
				pointSize='2'
				// vOn:on-change={this.onRatioChange}
			>
			</fx-list-cell-input-number>
		},
		ratioText (row) {
			return row.conversionFactor || 0
		},
		FormatterDescrib (row) {
			if (row.busUnit && row.conversionFactor) {
				return `1${row.busUnit}=${row.conversionFactor}${this.materialDetails.materialUnitName}`
			}
		},
		// onRatioChange (val, row) {
		// 	if (row.busUnit && row.conversionFactor) {
		// 		row.describ = `1${this.materialDetails.materialUnitName}=${row.conversionFactor}${row.busUnit}`
		// 	}
		// },
		// onUnitNameChange (val, row) {
		// 	if (row.busUnit && row.conversionFactor) {
		// 		row.describ = `1${this.materialDetails.materialUnitName}=${row.conversionFactor}${row.busUnit}`
		// 	}
		// },
		unitNameRender (h, { row, $index }) {
			h = this.$createElement
			return <fx-list-cell-input
				ref={`busUnit-${$index}`}
				vModel={row.busUnit}
				isEdit={row.isEdit}
				row={row}
				rowIndex={$index}
				columnProp='busUnit'
				maxlength={this.$fxCommon.getFxInputMaxLength('commonName')}
				regType={this.$fxCommon.getFxInputReg('commonName')}
				// vOn:on-change={this.onUnitNameChange}
			></fx-list-cell-input>
		},
		beforeRowEdit (row) {
			return new Promise(resolve => {
				// const itemUnitList = (this.itemList.find(item => {
				// 	return item.id === row.item.id
				// }) || {}).itemUnitList
				// row.itemUnitList = itemUnitList
				resolve()
			})
		},
		onCellClick (type) {
			return (row) => {
				this.$refs.detailsTable.setRowEdit(row, type)
			}
		},
		fpInitAddDetailsData () {
			return new Promise(resolve => {
				resolve({
					busUnit: '',
					unitType: 0,
					conversionFactor: 0,
					describ: '',
					name: ''
				})
			})
		},
		fpSaveDetails (detail) {
			detail.materialId = this.materialDetails.id
			return this.onSaveDetailsHandler(detail)
		},
		onSaveDetailsHandler (params) {
			return this.$fxApi('material.unitSaveOrUpdate')({ data: params }).then(res => {
				return Promise.resolve(res)
			})
		},
		fpDeleteDetails (ids) {
			if (ids.length > 0) {
				return this.$fxApi('material.unitDelete')({
					data: {
						ids: ids
					}
				}).then(res => {
					return Promise.resolve(res)
				})
			}
		},
		onDetailsRefresh () {
			this.$emit('on-details-refresh')
		},
		checkDetailsUnSaving () {
			return this.$refs.detailsTable.checkDetailsUnSaving()
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
</style>
